<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式。

        1.打开调试工具

            打开Chrome浏览器，按下F12键或者右击页面空白处→检查。

        ⒉使用调试工具

            Ctrl+滚轮可以放大开发者工具代码大小。
            左边是HTML元素结构，右边是CSS样式。
            右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。
            Ctrl+0复原浏览器大小。
            如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
            如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。
 -->

</body>

</html>